import React, { useState } from "react";

export default function App() {
  const [list, setList] = useState(["111", "222", "333"]);
  const [text, setText] = useState("");

  let handleChange = (e) => {
    setText(e.target.value);
  };
  let handleClick = () => {
    setList([...list, text]);
    setText("");
  };
  let handleDel = (index) => {
    let newList = [...list];
    newList.splice(index, 1);
    setList(newList);
  };
  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleClick}>点击</button>
      <ul>
        {list.map((item, index) => {
          return (
            <li key={item}>
              {item}
              <button onClick={() => handleDel(index)}>del</button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
